<template>
  <div id="login">
    <div class="chahua">
      <div class="loginBox">
        <div class="title">欢迎登录</div>

        <div class="loginType">
          <span
            :class="{ active: loginType === 1 }"
            class="account"
            @click="changeLoginType(1)"
          >
            账号密码登录
          </span>
          <span
            :class="{ active: loginType === 2 }"
            class="phone"
            @click="changeLoginType(2)"
          >
            手机验证码一键登录
          </span>
        </div>

        <div class="loginInput" v-if="loginType === 1">
          <input
            class="accountValue"
            type="text"
            placeholder="用户名/邮箱/手机号"
          />

          <input type="password" placeholder="密码" />

          <input class="validCode" type="text" placeholder="验证码" />
          <div class="captchaImg" @click="getCaptchaCodeImg">
            <img :src="captchaData" alt="" />
          </div>

          <div class="remember">
            <span class="rememberMe">
              <input
                class="rememberCheckBox"
                type="checkbox"
                checked="checked"
              />记住密码
            </span>
            <span class="noAccount register" @click="changeLoginType(2)"
              >没有账号？</span
            >
            <span class="forgerPassword">忘记密码？</span>
          </div>

          <div class="loginBtn" @click="accountLogin()">登录</div>
        </div>

        <div class="loginInput" v-if="loginType === 2">
          <input class="accountValue" type="text" placeholder="手机号" />

          <input class="phoneValidCode" type="text" placeholder="手机验证码" />

          <div v-if="sendCodeStatus === 0" class="sendCode" @click="sendCode()">
            获取验证码
          </div>
          <div v-if="sendCodeStatus === 1" class="sendIng">
            {{ codeTimer }}s后获重新获取
          </div>
          <div v-if="sendCodeStatus === 2" class="resend" @click="sendCode()">
            重新获取
          </div>

          <input class="validCode" type="text" placeholder="验证码" />

          <div class="captchaImg" @click="getCaptchaCodeImg">
            <img :src="captchaData" alt="" />
          </div>

          <div class="loginBtn" style="margin-top: 20px" @click="phoneLogin()">
            登录
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCaptcha } from "@/api/loginApi";

export default {
  name: "loginView",
  data() {
    return {
      //1账号密码  2 手机验证码
      loginType: 1,
      //验证码发送状态 0未发送 1正在获取 2已发送
      sendCodeStatus: 0,
      codeTimer: 60,
      captchaData: "",
    };
  },
  created() {
    this.getCaptchaCodeImg();
  },
  methods: {
    phoneLogin() {
      this.$store.dispatch("login");
    },
    accountLogin() {
      this.$store.dispatch("login");
    },
    changeLoginType(type) {
      this.loginType = type;
      this.getCaptchaCodeImg();
    },
    getCaptchaCodeImg() {
      getCaptcha()
        .then((res) => {
          console.log(res);
          this.captchaData = res.result;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    sendCode() {
      this.sendCodeStatus = 1;
      let that = this;
      let st = setInterval(function () {
        that.codeTimer--;
        if (that.codeTimer === 0) {
          that.sendCodeStatus = 2;
          that.codeTimer = 60;
          clearInterval(st);
        }
      }, 1000);
    },
  },
};
</script>


<style scoped>
#login {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("../assets/login-bgk.png") center no-repeat;
  background-size: cover;
}
.chahua {
  width: 100%;
  height: 100%;
  min-height: 800px;
  background: url("../assets/login-chahua.png") center no-repeat;
}

.loginBox {
  width: 368px;
  height: 406px;
  margin: 100px auto;
}

.title {
  font-size: 26px;
  color: #013d8b;
  text-align: center;
  font-weight: 600;
}

.loginType {
  margin-top: 40px;
  font-size: 16px;
  color: #606266;
}

.loginType span {
  cursor: default;
}

.account {
  margin-right: 36px;
}

.account,
.phone {
  display: inline-block;
  height: 34px;
  line-height: 34px;
}

.loginInput {
  width: 100%;
}

.loginInput > input {
  height: 40px;
  width: 100%;
  margin-top: 20px;
  border: 1px solid #c0c4cc;
  outline: none;
  font-size: 14px;
  padding-left: 8px;
  box-sizing: border-box;
}

.loginInput > input:hover {
  border: 1px solid #409eff;
  outline: 1px solid #409eff;
}

.loginInput > input:focus {
  border: 1px solid #409eff;
  outline: 1px solid #409eff;
}

.sendCode,
.resend {
  float: right;
  margin-top: 20px;
  width: 102px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  box-sizing: border-box;
  font-size: 12px;
  border: 1px solid #dcdfe7;
  cursor: pointer;
}
.sendCode:hover {
  color: #409eff;
  border: 1px solid #409eff;
}

.sendIng {
  float: right;
  margin-top: 20px;
  width: 102px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  box-sizing: border-box;
  color: white;
  font-size: 12px;
  background-color: #409eff;
}

.loginInput .validCode {
  width: 258px;
}
.captchaImg {
  float: right;

  margin-top: 20px;
  width: 102px;
}
.loginInput .phoneValidCode {
  width: 258px;
}

.remember {
  width: 100%;
  margin-top: 15px;
}

.remember span {
  font-size: 14px;
}

.remember .rememberMe {
  font-size: 14px;
  vertical-align: middle;
}
.rememberMe .rememberCheckBox {
  display: inline;
  margin: 0 8px 0 0;
}

.noAccount {
  margin-left: 40px;
}

.register {
  color: #1989fa;
  cursor: pointer;
}

.forgerPassword {
  color: #1989fa;
  cursor: pointer;
  float: right;
}

.loginBtn {
  margin-top: 15px;
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  background-color: #409eff;
  color: white;
}

.loginBtn:hover {
  background-color: rgba(64, 158, 255, 0.7);
}

.phoneLogin > input {
  height: 40px;
  width: 100%;
  margin-top: 20px;
  border: 1px solid #c0c4cc;
  outline: none;
  font-size: 16px;
  padding-left: 8px;
  box-sizing: border-box;
}

.active {
  border-bottom: 2px solid #1989fa;
  color: #409eff;
}
</style>
